<template>
<div>
    <el-row :gutter="20">
        <el-col :span="4" v-for="item in tableData" :key="item.id">
            <div class="bg-purple" v-if="item.food_table_action === 0">
                <div class="title">
                    {{ item.food_table_number }}
                    <span>桌</span>
                </div>
                <div>
                    <span class="tableText1">{{ item.food_table_seat }}人桌</span>
                    <span class="tableText2">{{ item.food_table_type }}</span>
                </div>
                <button class="but1" @click="
              dian(
                item.food_table_number,
                item.food_table_action,
                item.id,
                item.food_table_peoples
              )
            ">开始点菜</button>
            </div>
            <div class="bg-purple bg-purple1" v-if="item.food_table_action === 1">
                <div class="title">
                    {{ item.food_table_number }}
                    <span>桌</span>
                </div>
                <div>
                    <span :class="[
                item.food_table_seat >= item.food_table_peoples
                  ? 'tableText1'
                  : 'tableText3',
              ]">
                        {{ item.food_table_peoples }}/{{
              item.food_table_seat
              }}人桌
                    </span>
                    <span class="tableText2">{{ item.food_table_type }}</span>
                </div>

                <el-button round type="primary" @click="
              dian(
                item.food_table_number,
                item.food_table_action,
                item.id,
                item.food_table_peoples
              )
            ">加菜</el-button>
                <el-button round type="info" @click="jiezhang(item.id)">结账</el-button>
                <br />
                <el-button class="but" type="danger" round @click="open(item.id)">删除使用</el-button>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
import * as api from "../utils/api";
export default {
    name: "SelectTavle",
    data() {
        return {
            tableData: [],
        };
    },
    computed: {
        aa() {
            if (this.$route.query.id) {
                console.log(555);
                let obj = {
                    num: this.$route.query.id.food_table_number,
                    zhuangtai: this.$route.query.id.food_table_action,
                    id: this.$route.query.id.id,
                    ren: this.$route.query.id.food_table_peoples,
                };
                console.log(obj);
                this.$emit("diancai", obj);
            }
        },
    },
    created() {
        this.axios({
            url: api.GET_TABLE,
            method: "get",
        }).then((data) => {
            console.log(data.data.data);
            this.tableData = data.data.data;
        });
        this.aa;
    },
    methods: {
        dian(num, zhuangtai, id, ren) {
            // 传递点菜桌号到父组件
            let obj = {
                num,
                zhuangtai,
                id,
                ren,
            };
            console.log(obj);
            this.$emit("diancai", obj);
        },
        open(id) {
            this.$confirm("此操作不可恢复, 是否继续?", "删除使用", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    center: true,
                })
                .then(() => {
                    this.axios({
                        url: api.POST_DELORDFOOD,
                        method: "post",
                        data: {
                            food_table_id: id,
                            foods: [],
                        },
                    }).then((data) => {
                        console.log(data);
                        if (data.data.code === 200) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            // 删除成功再次请求数据
                            this.axios({
                                url: api.GET_TABLE,
                                method: "get",
                            }).then((data) => {
                                console.log(data.data.data);
                                this.tableData = data.data.data;
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        jiezhang(id) {
            this.$router.push({
                path: "/cashier",
                query: {
                    id: id,
                },
            });
        },
    },
};
</script>

<style lang="less">
.el-col {
    // border-radius: 4px;
    margin-top: 10px;
    min-width: 170px;
}

.bg-purple {
    background-color: #ff7119;
    border: 2px solid #fff;
    min-height: 200px;
}

.bg-purple1 {
    background-color: #25cbe3;
}

.title {
    margin-top: 10px;
    width: 100%;
    font-size: 35px;
    height: 40px;
    line-height: 40px;
    color: white;

    span {
        font-size: 16px;
    }
}

.tableText1 {
    display: inline-block;
    width: 50%;
    height: 50px;
    line-height: 50px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.tableText2 {
    display: inline-block;
    width: 50%;
    height: 50px;
    line-height: 50px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.but {
    // width: 80px;
    // height: 30px;
    // border: none;
    // font-size: 16px;
    // font-weight: 600;
    // background-color: #ffece0;
    // color: #ff7119;
    // outline: none;
    // cursor: pointer;
    // margin-bottom: 15px;
    // margin: 0 5px 10px 5px;
    margin-top: 10px;
}

.but1 {
    width: 80px;
    height: 30px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    background-color: #ffece0;
    color: #ff7119;
    outline: none;
    cursor: pointer;
    margin-top: 20px;
}

.tableText3 {
    color: red;
    display: inline-block;
    width: 50%;
    height: 50px;
    line-height: 50px;
    font-weight: 600;
    font-size: 16px;
}
</style>
